<template>
  <User :username="username" :age="age" class="d1"></User>
  <Student></Student>
</template>

<script>
import {ref, reactive, toRefs, computed, watchEffect, watch, provide} from 'vue'
import User from "./components/User.vue";
import Student from "./components/Student.vue";

export default {
  name: 'App',
  components: {
    User,Student
  },
  setup() {
    const user = reactive({
      username: 'aaa',
      age: 18
    });

    const student = reactive({
      name: '小红',
      classname: '少年一班'
    });
    provide('student', student);
    return {...toRefs(user), student}
  }
}
</script>

<style scoped>
/* 样式 */
.d1 {
  color: blue;
}
</style>